<template>
	<div class="version w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<p><i class="line"></i>版本管理</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report clearFix">
				<a class="listOne" @click="addVersionPage" v-if="version.bbgl_add">新增版本</a>
				<div class="msearch">
					<input placeholder="请输入版本号..." v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
		</div>
		<el-table ref="multipleTable" :data="tableData" border>
			<el-table-column prop="createTimeStr" label="发布时间"></el-table-column>
			<el-table-column prop="versionsType" label="系统类型"></el-table-column>
			<el-table-column prop="versionsNo" label="版本号"></el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.versionsState == 0"><i style="background: #FF2D51;"></i>待发布</span>
					<span v-else><i style="background: #44CEF6;"></i>已发布</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<div class="status" v-if="scope.row.versionsState == 0">
						<el-button @click="handleRelease(scope.index,scope.row)" v-if="version.bbgl_release">发布</el-button>
						<el-button @click="handleEdit(scope.row)" v-if="version.bbgl_edit" class="blue">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" v-if="version.bbgl_del" class="red">删除</el-button>
					</div>
					<el-button @click="handleSeen(scope.row)" v-if="scope.row.versionsState == 1 && version.bbgl_seen">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pag_block" style="margin-top: 15px;">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
		</div>
		<!--新增版本-->
		<div class="versionWrap" v-show="wrapShow">
			<!--<p>新增版本：</p>-->
			<div class="version_line">
				<em>系统类型:</em>
				<el-radio-group v-model="radioType">
				    <el-radio label="IOS" name="radioType"></el-radio>
				    <el-radio label="Android" name="radioType"></el-radio>
				</el-radio-group>
			</div>
			<div class="version_line">
				<em>版本号:</em>
				<input v-model="verNumber" placeholder="请输入版本号..."/>
			</div>
			<div class="version_line">
				<em>版本大小:</em>
				<input v-model="verContent" placeholder="请输入版本大小..."/>
			</div>
			<div class="version_line" style="height: 80px;">
				<em>更新内容:</em>
				<textarea placeholder="请输入更新内容..." v-model="verText"></textarea>
			</div>
			<div class="footerButton">
				<a @click="addSubmitSave">保存</a>
				<a @click="cancel" class="cancel">取消</a>
			</div>
		</div>
		<!--查看弹窗-->
		<div class="chakanVersion" v-show="chakanStatus">
			<p class="title">详情</p>
			<p>
				<span>系统类型：</span>
				<el-radio-group v-model="type" disabled="disabled">
					<el-radio label="IOS" name="radioType"></el-radio>
					<el-radio label="Android" name="radioType"></el-radio>
				</el-radio-group>
			</p>
			<p><span>版本号：</span>{{typehao}}</p>
			<p><span>版本大小：</span>{{size}}</p>
			<p><span>更新内容：</span>{{versiontext}}</p>
			<a @click="chakanSubmit">确定</a>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				version:'',
				nowType:'add',
				wrapShow:false,
				chakanStatus:false,
				search: '',
				tableData: [],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				type:'',
				versiontext:'',
				size:'',
				typehao:'',
				//查看弹窗设置
				radioType:'',
				verNumber: '',
				verContent:'',
				verText:''
			}
		},
		methods: {
			getTableList() {
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/versionsManage/selectVersionsManageList",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						rootcompanyid:1,
						versionsNo:this.search,
						page:this.currentpage,
						num:this.pagesize
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total = res.data.data.pageParam.items;
						}
					}
				});
			},
			addVersionPage(){
				this.wrapShow = true;
			},
			handleEdit(row) {
				this.updateTitle = '编辑版本';
	 			this.nowType = 'edit';
	 			this.wrapShow = true;
	 			this.id = row.id;
	 			this.radioType = row.versionsType;
	 			this.verContent = row.versionsSize;
	 			this.verNumber = row.versionsNo;
	 			this.verText = row.versionsDesc;
			},
			handleSeen(row){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/versionsManage/selectVersionsManage",
					method: 'POST',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: {id:row.id},
					success: res => {
						if(res.data.code == 200) {
							this.wrapShow = false;
							this.chakanStatus = true;
							this.type = res.data.data.versionsType;
							this.size = res.data.data.versionsSize;
							this.typehao = res.data.data.versionsNo;
							this.versiontext = res.data.data.versionsDesc;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			addVersion() {
				let that = this;
				let addVersionDetail = {
					rootcompanyid:1,
					versionsType:this.radioType,
					versionsNo:this.verNumber,
					versionsSize:this.verContent,
					versionsDesc:this.verText,
					versionsState:0
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/versionsManage/addVersionsManage",
					method: 'POST',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: addVersionDetail,
					success: res => {
						if(res.data.code == 200) {
							this.wrapShow=false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			updateVersion() {
				let that = this;
				let updateVersionDetail = {
					id:this.id,
					rootcompanyid:1,
					versionsType: this.radioType,
					versionsNo: this.verNumber,
					versionsSize: this.verContent,
					versionsDesc: this.verText,
					versionsState:0
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/versionsManage/updateVersionsManage",
					method: 'PUT',
					headers:{'ContentType': 'application/json; charset=utf-8'},
					data: updateVersionDetail,
					success: res => {
						if(res.data.code == 200) {
							this.wrapShow=false;
							this.$refs.alert.show({
								alertText: '保存成功',
								alertSubmit: function() {
									alertStatus: 0;
									that.getTableList();
								}
							});
							this.$rootFunction().deleteInTableList();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			addSubmitSave() {
				if(this.nowType == 'add') {
					this.addVersion();
				}else if(this.nowType == 'edit') {
					this.updateVersion();
				}
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit() {
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/versionsManage/deleteVersionsManage",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'DELETE',
					data:{id:this.transitionRow.id},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			cancel(){
				this.wrapShow = false;
				this.radioType='';
				this.verNumber='';
				this.verContent='';
				this.verText='';
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleRelease(index,row) {
				this.transitionRow = row;
				this.$rootFunction().rootRelease();
			},
			chakanSubmit(){
				this.chakanStatus = !this.chakanStatus
			},
			fabuSubmit(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/versionsManage/releaseVersion",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {id:this.transitionRow.id},
					success: res => {
						if (res.data.code == 200) {
							this.$rootFunction().releaseResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getTableList();
			this.version = this.$root.huasan.version;
		}
	}
</script>
<style>
	.version .el-table__row i{width: 5px;height: 5px;display: inline-block;border-radius: 50%;position: relative;top: -2px;margin-right: 3px;}
	/* 查看弹窗设置 */
	.chakanVersion {width:400px;height:270px;position: fixed;top: 50%;left: 50%;margin-top: -135px;margin-left: -200px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.chakanVersion .title{font-size: 16px;color:#999;height: 30px;line-height: 30px;padding-left: 8px;border-bottom: 1px solid #ccc;margin-left:0;margin-bottom: 18px}
	.chakanVersion p{margin: 0 0 20px 24px;}
	.chakanVersion a{background:#44CEF6;height:33px;line-height:33px;width:100px;display:block;color:#fff;margin: 30px auto 0;text-align: center;border-radius: 5px;cursor: pointer;}
	.chakanVersion .el-radio__input.is-checked .el-radio__inner{border-color: #e6e6e6;background: #e6e6e6;}
	.chakanVersion .el-radio__input.is-checked+.el-radio__label{color:#333}
	/* f发布弹窗设置 */
	/*.version .fabu{width:400px;height:200px;position: fixed;top: 50%;left: 50%;margin-top: -100px;margin-left: -200px;z-index: 999;border:1px solid #ccc;background: #fff;}
	.version .fabu .fabuClose{position: absolute;top: 10px;right: 14px;color: #333;cursor: pointer;}
	.version .fabu p{margin: 57px auto 70px;font-size: 16px;color:#999;text-align: center}
	.version .fabu .fabuButton a{background:#44CEF6;height:33px;line-height:33px;width:100px;display:inline-block;color:#fff;text-align: center;border-radius: 5px;cursor: pointer;margin: 0 0 0 65px}
	.version .fabu .fabuButton a.right{margin-left: 68px;background: #ccc}*/
</style>
